import React, { useState, useEffect } from "react";
import { Link, useHistory, Route, Redirect, useRouteMatch } from "react-router-dom";

// react-router-dom hooks的方法
/*  useHistory 
    useLocation
    useRouteMatch
    useParams
*/

const Home = () => {
    const history = useHistory();
    const { path, url } = useRouteMatch();
    const [data, setData] = useState([]);
    useEffect(() => {
        fetch("https://cnodejs.org/api/v1/topics")
            .then((res) => res.json())
            .then((res) => {
                // console.log(res.data);
                res && setData(res.data);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);
    return (
        <div>
            <ul>
                <div
                    style={{
                        width: 150,
                        height: 200,
                        display: "flex",
                        justifyContent: "space-between",
                        flexWrap: "wrap",
                        fontSize: "18px",
                    }}
                >
                    <Link to={`${url}/all`}>全部</Link>
                    <Link to={`${url}/share`}>分享</Link>
                    <Link to={`${url}/good`}>精华</Link>
                    {/* <Link to="/home/all">全部</Link>
                    <Link to="/home/share">分享</Link>
                    <Link to="/home/good">精华</Link> */}

                    {/* 注意一级路由，二级路由，三级路由的形式 */}
                    <div>
                        <Route path={`${path}/all`} render={() => <h1>全部</h1>} />
                        <Route path={`${path}/share`} render={() => <h1>分享</h1>} />
                        <Route path={`${path}/good`} render={() => <h1>精华</h1>} />
                        <Redirect to="/home/all" />
                        {/* <Route path="/home/all" render={() => <h1>全部</h1>} />
                        <Route path="/home/share" render={() => <h1>分享</h1>} />
                        <Route path="/home/good" render={() => <h1>精华</h1>} />
                        <Redirect to="/home/all" /> */}
                    </div>
                </div>
                {data.map((item) => (
                    <li
                        key={item.id}
                        onClick={() => history.push("/detail/" + item.id)}
                        // js跳转

                        style={{
                            width: "100%",
                            height: "50px",
                            lineHeight: "50px",
                            listStyle: "none",
                            marginLeft: "5px",
                            borderBottom: "1px solid #ccc",
                        }}
                    >
                        {item.title}
                        {/* <Link to={`/detail/${item.id}`}>{item.title}</Link> */}
                        {/* <Link to={"/detail/" + item.id}>{item.title}</Link> */}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default Home;

/* data.map((item) => (
    <Link to={'/'+{item.id}}>
        <li
            key={item.id}
            style={{
                width: "100%",
                height: "50px",
                lineHeight: "50px",
                listStyle: "none",
                borderBottom: "1px solid #ccc",
            }}
        >
            {item.title}
        </li>
    </Link>
)) */
